<template>
  <div class="stateMonitor">
    <div class="searchDiv">
      <Form :model="searchItem" :label-width="90">
        <Row :gutter="10">
          <Col span="6">
            <FormItem label="电站">
              <Select v-model="searchItem.powerStation" clearable filterable @on-change="getHd">
                <Option
                  v-for="(item, index) in powerStationList"
                  :value="item"
                  :key="index"
                >{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="HD编号">
              <Select
                v-model="searchItem.hdNumber"
                clearable
                filterable
                :disabled="HBnumberList.length == 0"
                @on-change="getJz"
              >
                <Option v-for="(item, index) in HBnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="机组编号">
              <Select
                v-model="searchItem.aircrewNumber"
                clearable
                filterable
                :disabled="JZnumberList.length == 0"
              >
                <Option v-for="(item, index) in JZnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
                    <FormItem label="监测状态">
                      <Select v-model="searchItem.alarmAlias" clearable filterable>
                          <Option v-for="(item, index) in alarmAliasList" :value="item.displayName" :key="index">{{item.displayName}}</Option>
                      </Select>
                    </FormItem>
           </Col>

          <Col span="24" style="text-align:center;">
            <Button type="primary" @click="searchItem.pageNo=1;search()">查询</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Table :loading="loading" border :columns="columns" :data="tableData" ></Table>
    <Page show-total :total="total" :current="searchItem.pageNo" :page-size="searchItem.pageSize"  style="margin:20px auto;text-align:center" @on-change="pageChange" />
  </div>
</template>

<script>
import {getSelectOption,getAllEqu} from '@/api/select'
import {getTableData,} from '@/api/stateMonitor'
export default {
  data() {
    return {
      searchItem: {
        pageNo: 1,
        pageSize: 10,
        powerStation:'',
        hdNumber:'',
        aircrewNumber:'',
        alarmAlias:''
      },
      loading:true,
      total:0,
      alarmAliasList:[],
       allEquList: [],
      allEquList2: [],
      powerStationList:[],
      HBnumberList:[],
      JZnumberList:[],
      columns: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          title: "电站",
          key: "powerStation"
        },
        {
          title: "HD编号",
          key: "hdNumber"
        },
        {
          title: "机组编号",
          key: "aircrewNumber"
        },
        {
          title: "型号",
          key: "model"
        },
        {
          title: "监测状态",
          key: "alarmAlias"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.$router.push({path:'/state/alarmRecord/alarmRecord/alarmRecord',query:{equipmentId:params.row.id,aircrewNumber:params.row.aircrewNumber}})
                    }
                  }
                },
                "报警记录"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.$router.push({path:'/state/onlineTrend'})
                    }
                  }
                },
                "趋势分析"
              )
            ]);
          }
        }
      ],
      tableData: [],
    };
  },
  methods: {
    pageChange (e) {
      this.searchItem.pageNo = e
      console.log(this.searchItem.pageNo, '页码')
      this.search()
    },
    search () {
      getTableData(this.searchItem).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading=false
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    //获取监测状态
    getalarmAlias () {
      getSelectOption(
        {
          code: 'alarmAlias'
        }
      ).then(res => {
        this.alarmAliasList = res.data
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    // 获取电站类型列表
    // powerStation () {
    //   getSelectOption(
    //     {
    //       code: 'dianzhan'
    //     }
    //   ).then(res => {
    //     this.powerStationList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },
    // HBnumber () {
    //   getSelectOption(
    //     {
    //       code: 'hd_code'
    //     }
    //   ).then(res => {
    //     this.HBnumberList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },
    // JZnumber () {
    //   getSelectOption(
    //     {
    //       code: 'jizu_code'
    //     }
    //   ).then(res => {
    //     this.JZnumberList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },
    getAllEqument() {
      getAllEqu(null).then(res => {
        this.allEquList = res.data;
        let arr = res.data.map(function(item) {
          return item.powerStation;
        });
        this.powerStationList = [...new Set(arr)];
      });
    },
    getHd(e) {
      this.JZnumberList = [];
      this.allEquList2 = this.allEquList.filter(item => item.powerStation == e);
      let arr2 = this.allEquList2.map(function(item) {
        return item.hdNumber;
      });
      this.HBnumberList = [...new Set(arr2)];
    },
    getJz(e) {
      let arr = this.allEquList2.filter(item => item.hdNumber == e);
      let arr2 = arr.map(function(item) {
        return item.aircrewNumber;
      });
      this.JZnumberList = [...new Set(arr2)];
    }
  },
  mounted() {
    this.getAllEqument();
    this.getalarmAlias()
    this.search();
  }
};
</script>

<style lang="less">
.stateMonitor {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
      margin-bottom: 15px;
    .marRight {
      margin-right: 15px;
    }
  }
  .ivu-form-item {
    margin-bottom: 15px;
  }
}
.baseTitle {
    font-weight: bold;
    font-size:16px;
    margin-bottom:10px;
  }
 .xzjz  {
   .ivu-form-item {
    margin-bottom: 10px;
  }
 }
</style>
